<!-- 个人主页 -->
<template>
  <!-- 全部文章区域 -->
  <div class="allArticle">
      <!-- 个人主页 -->
      <div class="imformationBox" style="position:relative;">
        <!-- 页头 -->
        <el-page-header style="position: absolute;z-index: 10;margin: 10px 0px 0px 25px;color:whitesmoke;"
                        title="返回" @back="goBack" />
        <!-- 背景图像 -->
        <div class="background">
          <div class="demo-image">
            <div :key="fit1" class="block">
              <el-image style="width: 620px; height: 200px" z-index="30" :preview-src-list="srcList" :src="url1" :fit="fit1"></el-image>
            </div>
          </div>
        </div>
        <!-- 部分资料展示 -->
        <div class="imformations">
          <!-- 用户头像 -->
          <div class="userAvatar">
            <div class="demo-fit">
              <div class="block" :key="fit">
                <el-avatar style="border: white solid 3px" shape="circle" :fit="fit" :size="100" :src="url"></el-avatar>
              </div>
            </div>
          </div>
          <!-- 用户昵称 -->
          <div class="userName">
            <n-ellipsis style="max-width: 100px;">
              江鸟源
            </n-ellipsis>
          </div>
          <!-- 个性签名 -->
          <div class="personalSignature">
            <n-ellipsis style="max-width: 200px;">
              温柔的本质是冷漠
            </n-ellipsis>
          </div>
        </div>
        <!-- 菜单跳转 -->
        <div class="menu">
          <el-menu style="margin-top: 90px" default-active="1" :router="true" unique-opened :default-openeds="['1']"
                   class="el-menu-demo" @open="handleOpen" @close="handleClose" mode="horizontal" @select="handleSelect">
            <el-menu-item style="width: 155px" index="1" route="userArticles">我的文章</el-menu-item>
            <el-menu-item style="width: 155px" index="2" route="shareArticles">我的分享</el-menu-item>
            <el-menu-item style="width: 155px" index="3" route="myAttention">我的关注</el-menu-item>
            <el-menu-item style="width: 155px" index="4" route="myFans">我的粉丝</el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="content">
        <router-view/>
      </div>
  </div>

</template>

<script>
import { defineComponent, reactive, toRefs, ref } from 'vue'
export default defineComponent({
  setup () {
    const activeIndex = ref('1')
    const activeIndex2 = ref('1')
    const handleSelect = (key, keyPath) => {
      console.log(key, keyPath)
    }
    // 资料卡用户头像和背景
    const state = reactive({
      fit: ['cover'],
      url: 'https://wx3.sinaimg.cn/mw2000/005Qi9xgly8gd8vjxqlrij30ro0ro412.jpg',
      fit1: ['cover'],
      url1: 'https://img1.baidu.com/it/u=4216300925,23332868&fm=26&fmt=auto'
    })
    // 图片预览
    const srcList = ref([
      'https://img1.baidu.com/it/u=4216300925,23332868&fm=26&fmt=auto'
    ])
    // 页头
    const goBack = () => {
      console.log('go back')
    }

    return {
      ...toRefs(state),
      activeIndex,
      activeIndex2,
      goBack,
      srcList,
      handleSelect
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    }
  }
})
</script>

<style scoped>
.allArticle{
  width: 620px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #E4E7ED;
}
/* 资料卡 */
.imformationBox{
  width: 620px;
  height: 350px;
  background-color: white;
}
.imformationBox .background{
  width: 620px;
  height: 200px;
  background-color: #42b983;
}
.imformationBox .imformations{
  position: absolute;
}
.imformations .userAvatar{
  width: 100px;
  height: 100px;
  margin: -40px 0 0 20px;
  position: relative;
}
.imformations .userName{
  width: 100px;
  font-weight: 600;
  font-size: 18px;
  text-align: left;
  margin:-55px 0 0 130px;
  position: relative;
}
.imformations .personalSignature{
  width: 200px;
  color:darkgray;
  font-size: 8px;
  font-family: YouYuan;
  text-align: left;
  margin:-2px 0 0 130px;
  position: relative;
}
.content{
  width: 620px;
  margin: 20px 0;
  background-color: white;
}
</style>
